<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="relext.css" />
		<style type="text/css">
			.register-ipt {
				width: 1500px;
				height: 50px;
				border-radius: 5px;
				margin-left: 13px;
				margin-top: 15px;
				border: 1px solid lightgray;
				font-size: 18px;
				padding-left: 10px;
				position: relative;
			}

			.register-btn {
				width: 1510px;
				height: 50px;
				margin-left: 13px;
				margin-top: 15px;
				font-size: 18px;
				background-color: #FFFF00;
				border: 1px solid white;
				cursor: pointer;
			}

			#canvas {
				border: 1px solid lightgray;
				position: absolute;
				left: 1370px;
				top: 92px;
			}

			.code .btn {
				width: 80px;
				height: 30px;
				border: 1px solid lightgray;
				background-color: white;
				font-size: 16px;
				font-weight: bold;
				position: absolute;
				left: 1260px;
				top: 94px;
			}

			.get-note {
				width: 150px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				position: absolute;
				left: 1372px;
				top: 158px;
				background-color: #6AC3DE;
				color: gray;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><input type="tel" name="mobile_phone" id="mobile" placeholder="手机号" class="register-ipt" /></li>
			<li class="code">
				<input type="text" name="captcha" placeholder="图文验证码" class="register-ipt" />
				<canvas id="canvas" width="150" height="30"></canvas>
				<button class="btn">提交</button>
			</li>
			<li><input type="tel" name="note" placeholder="短信验证码" class="register-ipt" /><a href="" class="get-note" id="get_note">获取短信验证码</a></li>
			<li><input type="password" id="password" placeholder="密码" class="register-ipt" /></li>
			<li><input type="password" id="password_again" placeholder="确认密码" class="register-ipt" /></li>
			<li><input type="submit" value="注册" class="register-btn"  id="register"/></li>
		</ul>
	</body>
</html>
<script src="jQuery.js"></script>
<script>
	// 手机号
	var mobile = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;

	function verifyTel(tel) {
		if (mobile.test(tel)) {
			return true;
		}
		return false;
	}
	// 图文验证码
	$(function() {
		var show_num = [];
		draw(show_num);
		$("#canvas").on('click', function() {
			draw(show_num);
		})
		$(".btn").on('click', function() {
			var val = $(".input-val").val().toLowerCase();
			var num = show_num.join("");
			if (val == '') {
				alert('请输入验证码！');
			} else if (val == num) {
				alert('提交成功！');
				$(".input-val").val('');
				// draw(show_num);
			} else {
				alert('验证码错误！请重新输入！');
				$(".input-val").val('');
				// draw(show_num);
			}
		})
	})
	//生成并渲染出验证码图形
	function draw(show_num) {
		var canvas_width = $('#canvas').width();
		var canvas_height = $('#canvas').height();
		var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
		var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
		canvas.width = canvas_width;
		canvas.height = canvas_height;
		var sCode =
			"a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
		var aCode = sCode.split(",");
		var aLength = aCode.length; //获取到数组的长度
		for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
			var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
			// var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
			var deg = Math.random() - 0.5; //产生一个随机弧度
			var txt = aCode[j]; //得到随机的一个内容
			show_num[i] = txt.toLowerCase();
			var x = 10 + i * 20; //文字在canvas上的x坐标
			var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
			context.font = "bold 23px 微软雅黑";
			context.translate(x, y);
			context.rotate(deg);
			context.fillStyle = randomColor();
			context.fillText(txt, 0, 0);
			context.rotate(-deg);
			context.translate(-x, -y);
		}
		for (var i = 0; i <= 5; i++) { //验证码上显示线条
			context.strokeStyle = randomColor();
			context.beginPath();
			context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
			context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
			context.stroke();
		}
		for (var i = 0; i <= 30; i++) { //验证码上显示小点
			context.strokeStyle = randomColor();
			context.beginPath();
			var x = Math.random() * canvas_width;
			var y = Math.random() * canvas_height;
			context.moveTo(x, y);
			context.lineTo(x + 1, y + 1);
			context.stroke();
		}
	}
	//得到随机的颜色值
	function randomColor() {
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		return "rgb(" + r + "," + g + "," + b + ")";
	}
	// 短信验证码
	var get_note = document.getElementById("get_note");
	get_note.onclick = function() {
		get_note.disabled = true; //当点击后倒计时时候不能点击此按钮 
		var time = 5; //倒计时5秒 
		var timer = setInterval(fun1, 1000); //设置定时器 
		function fun1() {
			time--;
			if (time >= 0) {
				get_note.innerHTML = time + "s后重新发送";
			} else {
				get_note.innerHTML = "重新发送验证码";
				get_note.disabled = false; //倒计时结束能够重新点击发送的按钮 
				clearTimeout(timer); //清除定时器 
				time = 5; //设置循环重新开始条件 
			}
		}
	}
	// 密码和确认密码
	$(function() {
		$(document).on('blur', 'input', function() {
			var $password = $('#password').val();
			var $password_again = $('#password_again').val();
			if (!$password) {
				$("#password").addClass('redBorder').next('label').show().html('不能为空');;
				return false;
			} else if (!$password_again) {
				$("#password_again").addClass('redBorder').next('label').show().html('不能为空');
				return false;
			} else {
				$('input').removeClass('redBorder').next('label').empty();
				if ($password_again == $password) {
					$("#password,#password_again").next('label').show().html('两次密码一致').addClass('valid');
				} else if ($password_again != $password) {
					$("#password,#password_again").addClass('redBorder').next('label').show().html('两次密码不一致').removeClass('valid')
						.addClass('erro');
				}

			}
		})
	})
	// 注册
	var oRegister = document.getElementById("register");
	function check(){
	        var mobileok = false;
	        var passwordok = false;
	  
	        if(checkName(ele.name.value)){
	            nameok = true;
	        }
	        if(checkPassword(ele.password.value,ele.password_again.value)){
	            passwordok = true;
	        }
	        if(mobileok && passwordok){
	            alert("恭喜，注册成功！");  
	        }
	        return false;
	    }
</script>
